
<template>
  <div>
    <div class="top-txt">
      <el-page-header @back="goBack" content="一个人的沙漠"></el-page-header>
    </div>
    <hr>
    <div class="m-song-wrap">
      <div class="m-song-disc">
        <div class="m-song-turn">
          <div class="m-song-rollwrap">
            <div class="m-song-img a-circling z-pause" v-for="item in img">
                <img :src="item.album.artists[0].picUrl" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mark">
      <i class="el-icon-chat-dot-square"></i>
      <i class="el-icon-edit"></i>
      <i class="el-icon-document-checked"></i>
      <i class="el-icon-date"></i>
    </div>
    <div class="musicplay">
      <b class="bo" @click = "play(id)">播放</b>
        <audio style="width:100% height:200px; z-index:20" controls :src="src" autoplay></audio>
    </div>
  </div>

</template>
<script>
//引入api请求
getMusiclist()
import{getMusiclist,bofang} from "@/api"
  export default {
    data(){
      return{
        src:'',
        id:"",
        img:""
      }
    },
    created () {
      // console.log(this.$route.params['id'])
      // let id = this.$route.params['id']
      this.id=this.$route.params['id']
      // console.log(this.id)
      this.getMusicList()
    },
    methods: {
      goBack() {
        console.log('go back');
      },
       getMusicList() {
        getMusiclist().then(res => {
          let picUrl = res.recommend;
          this.img=picUrl;
         
          // console.log(res.data.recommend)
          // console.log(res.data.recommend[0].album.artists[0].picUrl)
        });
      },
      play(id){
        // console.log(444)
        bofang({id})
        .then(res=>{
           this.src = res.data.data[0].url;
          //  console.log(this.src)
        })
        .catch(err => {
          console.log(err);
        });
    }
    }
  }
</script>
<style>
.top-txt{
  height:170px;
}
.m-song-wrap{
  padding-top:70px;
  height:500px;
  border: 1px solid black;
}
.m-song-disc {
    width: 296px;
    height: 296px;
    border:1px solid red;
    margin:0 auto;
}
.m-song-turn {
    width: 100%;
    height: 100%;
}
.m-song-turn{
    width:100%;
    height: 100%;
    content: " ";
    /* position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2; */
    background: url(//s3.music.126.net/mobile-new/img/disc.png?d3bdd10…) no-repeat;
    background-size: contain;
}
.mark{
  height:200px;
  border:1px solid black;

}
.bo{
  width:100px;
  height:100px;
}
.musicplay{
  z-index: 30;
  height:200px;
  border:2px solid black;
}
.musicplay b{
  font-size:30px;
}
</style>